<template>
    <div style="padding:45px;">
            <div class="case-child-end2 flex">
               <div class="flex row">
                    
              </div>


              <div class="flex row">
                  <div class="input flex">
                    <input placeholder="请输入关键词搜索"  v-model="SearchInput" class="case-input" @keyup.enter="searchContent"/>
                        
                    <button class="case-button" @click="searchContent()" ><i class="el-icon-search"></i></button>
                  </div>
                    <button class="dingzhi" @click="clear()">清空</button>
                    <el-button type="danger" round @click="newMubang()"><i class="el-icon-plus"></i>新建条款</el-button>
                  </div>
                  
              </div>
              
            <div class="selectMenu flex">
              
              
               
            </div>

              <el-table :data="tableData" border style="width: 100%" @row-click="lineCilck">
                <el-table-column prop="terms_name" label="条款名称"> </el-table-column>
                <el-table-column  label="创建人" prop="Staff_Name" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  label="创建时间" prop="create_time" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  label="模板备注" prop="note" :show-overflow-tooltip="true"></el-table-column>
              </el-table> 



            
            <div class="block flex">
              <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
              :page-sizes="[20,50,100]" :page-size="numPage"  layout="total, sizes, prev, pager, next, jumper" :total="total1">
                </el-pagination>
            </div>

            


             <!--  修改条款窗口  -->
            <el-dialog  :visible.sync="dialogFormVisible1" :modal-append-to-body='false' :modal='false' :before-close="Closewindows" top="300px" width="600px" >
                <div slot="title" class="dialog-title">
                  <p>修改模板</p>
                </div>

                  <el-form :model="form" class="form-select">
                      <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>

                      <el-form-item label="备注" :label-width="formLabelWidth">
                        <el-input v-model="form.remark" autocomplete="off" class="el-select1"></el-input>
                      </el-form-item>


                  </el-form>

                  

                <div slot="footer" class="dialog-footer">
                <div class="flex dialogFormVisivleFooter">
                    <el-button type="primary" @click="upd_Member()" :disabled="isDisabled">保存</el-button>
                </div>
                </div>
            </el-dialog>
            <!--  修改条款窗口  -->
                

    </div>
</template>
<script>
import qs from 'qs';
import Uediter from '@/components/UE.vue';

export default {
    data(){
        return{
            optionChildMenu:{},

            //表格
            tableData:[],

            Casevalue:[],
            //一级下拉
            Casevalue1:'',
            //二级下拉
            Casevalue2:0,

            total1:0,

            //1下拉菜单
            optionMenu:{},
            //2下拉菜单
            optionChildMenu:{},
            
            selectOneId:1,
            Category_Id:0,
            //搜索
            SearchInput:'',
            numPage:20,
            currentPage:1,

            //新建模板窗口
            dialogFormVisible:false,
            isDisabled:false,
            formLabelWidth:'',
            form:{
              name:"",
              remark:"",
            },
            roleArr:[],
            checkList:[],

            //修改模板窗口
            dialogFormVisible1:false,
            modifyid:"",

            dat: {
                  content: ''
              },
            ueditor: {
                value: '',
                config: {
                    initialFrameWidth: 750,
                    initialFrameHeight: 320
                }
            },

        }
    },
    methods:{
      
      //获取一级下拉
      getSelectMenu:function(){
          this.$http.get('/yongxu/Index/GetBoxOne').then((res)=>{
            this.optionMenu = res.data
          })
      },
      //下拉二级下拉查询
      getSelectChildeMenu:function(id){
            this.optionChildMenu = ''
            this.Casevalue1 =''
            this.selectOneId = id
            this.$http.get('/yongxu/Index/GetBoxTwo',{params:{Id:this.selectOneId}}).then((res)=>{
            this.optionChildMenu = res.data  
            this.optionChildMenu.push({Id:0,Value:'全部',Category_Id:0})
            this.Category_Id = this.Casevalue
            if(res.data.length===0){
                this.Casevalue1 = ''
            }else{
                this.Casevalue1 = 0
            }
            this.changeTowValue(this.Casevalue1)
         })
      },
      //获取二级菜单下拉
      changeTowValue:function(id){
          if(id == '' || id ==null){
            this.Casevalue2 = 0
          }else{
            this.Casevalue2 = id
          }
          console.log(this.optionChildMenu)
            this.getCaseList()
      },
      /** 
       * 获取案件列表
       * 案件全部与后面三个接口一致参数有异，这里只写此页面注释
       * ==不识别0，故使用===
       * userId 用户Id
       * Casevalue2 二级案件类型
       * statusValue && value 案件状态
       * end 最大时间
       * start 最小时间
       * SearchInput 搜索内容
       * numPage 分页每页条数
       * currentPage 当前页
      */     
        getCaseList:function(){ 
          let diy_id = ""
          if(this.Casevalue1 == ""){
              diy_id = 0
          }else{
              diy_id = this.Casevalue1
          }
         var userId = localStorage.getItem('userId')
         this.$http.post('/yongxu/Document/getContracttermslist',qs.stringify({
            terms_name:this.SearchInput,
            Display_Page_Number:this.numPage,
            PageNumber:this.currentPage,
         })).then((res)=>{
            this.tableData = res.data.mapList
            this.total1 = res.data.PageCount
        })
      },

      /**  page方法start */
      handleSizeChange:function(val) {
         this.numPage = val
         this.getCaseList()
      },
      handleCurrentChange:function(val) {
        this.currentPage = val
        this.getCaseList()
      },
      /**  page方法end */

      //清空
      clear:function(){
      this.currentPage = 1
      this.Casevalue = ''
      this.Casevalue2 = 0
      this.SearchInput=''
      this.Casevalue1 = ''
      this.Category_Id=0
      // console.log(this.Casevalue2)
      this.getCaseList()  
      },

      //搜索查询
      searchContent:function(){
       this.getCaseList()
      },

      //新建模板窗口 总体方法start
      newMubang(){
           this.$router.push({path:'/index/contractoutIndex/contratclause'})
          
      },
      Closewindows(){
          this.dialogFormVisible = false
          this.dialogFormVisible1 = false
      },
      add_Member(){
          this.dat.content = this.$refs.ue.getUEContent()
          console.log(this.dat.content)
          return false
          this.$http.post('/yongxu/Document/addContracttemplate',qs.stringify({
              User_Id:localStorage.getItem('userId'),
              template_name:this.form.name,
              note:this.form.remark,
              str:JSON.stringify(this.checkList)
          })).then((res)=>{
              if(res.data.sign == 200){
                this.$message({
                  message:"模板添加成功",
                  type:'success'
                })
                this.dialogFormVisible = false
                this.form.name = ""
                this.form.remark = ""
                this.checkList = []
              }else if(res.data.sign == 300){
                this.$message({
                  message:"模板重名,请修改名称后重新添加",
                  type:'warning'
                })
              }
          })
          
      },
      //新建模板窗口 总体方法end
      
      /**
       * 点击模板查看详情
       */
      lineCilck(row, event, column){
          this.$router.push({path:'/index/contractoutIndex/contratclause?id=' + row.Id})
          // this.$http.post('/yongxu/Document/getCasetype',{
          // }).then((res)=>{
          //     this.roleArr = res.data
          // })
          // this.$http.post('/yongxu/Document/showmyContracttemplatedetails',qs.stringify({
          //     Id:row.Id
          // })).then((res)=>{
          //     this.modifyid = row.Id
          //     this.dialogFormVisible1 = true
          //     this.form.name = res.data.template_name
          //     this.form.remark = res.data.note
          //     // this.checkList = []
          //     res.data.twoCasetypelists.forEach(element => {
          //         this.checkList.push(element.diy_id)
          //     });
          // })
      },
      /**
       * 修改接口
      */
      upd_Member(){
          this.$http.post('/yongxu/Document/updmyContracttemplatepreserve',qs.stringify({
              User_Id:localStorage.getItem('userId'),
              Id:this.modifyid,
              template_name:this.form.name,
              note:this.form.remark,
              str:JSON.stringify(this.checkList)
          })).then((res)=>{
              if(res.data.sign == 200){
                this.$message({
                  message:"模板修改成功",
                  type:'success'
                })
                this.dialogFormVisible1 = false
                this.form.name = ""
                this.form.remark = ""
                this.checkList = []
              }else if(res.data.sign == 300){
                this.$message({
                  message:"模板重名,请修改名称后重新添加",
                  type:'warning'
                })
              }
          })
      },

      returnContent () {
          this.dat.content = this.$refs.ue.getUEContent()
      },
      returnadd(type,text){

          this.$refs.ue.addhtml(type,text)
      }



    },
    mounted:function(){
        // this.getBranchList()
        this.getSelectMenu()
        this.getCaseList()
        // this.getCustomList()
        // this.getCustomTypeList()
    },
    components:{
      Uediter
    }

    
}
</script>
<style lang="scss">
@import '../../assets/sass/main.css';

.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD;
    
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end2{
    flex-direction: row;
    justify-content:space-between;
}
.selectMenu{
    margin-top: 20px;
}
.export{
  width: 25px;
  height: 25px;
  background: #7E2C2E;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.el-table-column--selection .cell{
  padding: 0 !important;
}
// .dingzhi{
//   margin-right:20px;
//   height: 38px;
// }
.el-select1{
  width: 80% !important;
}
.rolearr .el-form-item__label{
  width: 100%;
  text-align: left;
}

.ueditortitle{
  width: 100%;
  margin-top:25px;
  text-align: left;
}
.ueditorlabel{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .labellist{
    border:1px solid #222;
    margin-top:10px;
    text-align: center;
    padding:3px 5px;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    border-radius: 2px;
    cursor: pointer;

  }
  .labellist:hover{
    transition: all 0.6s;
    border: 1px solid #00aeff;
    color:#00aeff
  }
}
</style>

